import React, { useRef, useState } from "react";

import Dropdown from "../../components/dropdown";
import { PageWrap } from "../../styles/common";
import Tab from "../../components/tab";
import styled from "styled-components";

const TabWrap = styled.div`
  padding: 16px;
`;

const DropdownContainer = styled.div`
  width: 50%;
`;

const Home = () => {
  const [tabState, setTabState] = useState({});
  const tabRef = useRef();

  const buildContent = (key, count) => {
    const mockItems = (count) => {
      const views = [];
      for (let index = 0; index < count; index++) {
        views.push(<div key={index}>{index}</div>);
      }
      return views;
    };

    return (
      <>
        <p>{key}</p>
        {mockItems(count)}
      </>
    );
  };

  const tabData = [
    {
      key: 1,
      title: "图片",
      content: buildContent("one", 60),
    },
    {
      key: 2,
      title: "新闻",
      content: <p>two</p>,
    },
    {
      key: 3,
      title: "视频",
      content: <p>three</p>,
    },
    {
      key: 4,
      title: "图书",
      content: <p>four</p>,
    },
    {
      key: 5,
      title: "财经",
      content: <p>five</p>,
    },
  ];

  const handleOnTabChange = (state) => {
    setTabState(state);
  };

  const handleDropdownSelect = (item) => {
    tabRef.current.setActiveIndex(item.index);
  };

  return (
    <PageWrap>
      <h1>Home</h1>
      <h4>Tab State</h4>
      <h4>{`activeIndex: ${tabState.active}, lastIndex: ${tabState.last}`}</h4>
      <h4>Tab Method</h4>
      <DropdownContainer>
        <Dropdown
          placeHolder={"Click Me !"}
          data={tabData.map((item) => {
            const { key, title } = item;
            return { key, title };
          })}
          onSelect={handleDropdownSelect}
        />
      </DropdownContainer>
      <TabWrap>
        <Tab ref={tabRef} data={tabData} onChange={handleOnTabChange} />
      </TabWrap>
    </PageWrap>
  );
};

export default Home;
